<!-- 审批流程 -->
<template>
  <div class="approval">
    <!-- 受试者 -->
    <a-card v-if="$auth('PROJECT.PROJECT_REVIEW_PATIENT')">
      <a-descriptions title="受试者费用审批流程"></a-descriptions>
      <approve-steps :data="subject.nodeList" v-if="subject"></approve-steps>
      <a-button v-if="$auth('PROJECT.PROJECT_REVIEW_EDIT_PATIENT')" style="margin: 18px 0 0 0;" icon="plus" @click="subjectAction()">
        {{ addSubjectVisible ? '新增审批' : '编辑审批' }}
      </a-button>
    </a-card>
    <!-- 受试者 end-->

    <!-- 研究者 -->
    <a-card v-if="$auth('PROJECT.PROJECT_REVIEW_RESEARCHER')">
      <a-descriptions title="研究者费用审批流程"></a-descriptions>
      <approve-steps :data="research.nodeList" v-if="research"></approve-steps>
      <a-button v-if="$auth('PROJECT.PROJECT_REVIEW_EDIT_RESEARCHER')" style="margin: 18px 0 0 0;" icon="plus" @click="subjectResearch()">
        {{ addResearchVisible ? '新增审批' : '编辑审批' }}
      </a-button>
    </a-card>
    <!-- 研究者 end-->

    <!-- 受试者新增/编辑弹窗 -->
    <SubjectModal
      :visible="subjectModalVisible"
      :isEdit="isEditSubjectModal"
      :type="subjectType"
      @closeSubjectModal="closeModal"
      ref="subjectApprovalRef"
    />
  </div>
</template>

<script>
import monitor from '@/utils/monitor'
import approval from '@/monitor/views/overview/detail/responsible/components/approval/approval.js'
import SubjectModal from './approval/SubjectModal'
import approveSteps from './approveSteps'

const watch = monitor(approval)
export default {
  props: ['research', 'subject'],
  components: {
    SubjectModal, approveSteps
  },
  computed: {
    addSubjectVisible () {
      if (!this.subject || !this.subject.nodeList.length) return true
      return !this.subject.nodeList
    },
    addResearchVisible () {
      if (!this.research || !this.research.nodeList.length) return true
      return !this.research.nodeList
    }
  },
  data () {
    return {
      subjectType: 1, // 1 研究者  2 受试者
      subjectModalVisible: false,
      isEditSubjectModal: false
    }
  },
  methods: watch({
    // 受试者新增
    addSubject () {
      this.subjectModalVisible = true
      this.isEditSubjectModal = false
      this.subjectType = 2
    },
    // 受试者编辑
    editSubject () {
      this.$emit('update', 2)
      this.subjectModalVisible = true
      this.isEditSubjectModal = true
      this.subjectType = 2
      this.handleData(this.subject)
    },
    // 受试者click
    subjectAction () {
      if (this.addSubjectVisible) {
        this.addSubject()
      } else {
        this.browseApprovalPage()
        this.editSubject()
      }
    },
    // 研究者新增
    addResearcher () {
      this.subjectModalVisible = true
      this.isEditSubjectModal = false
      this.subjectType = 1
    },

    // 研究者编辑
    editResearch () {
      this.$emit('update', 1)
      this.subjectModalVisible = true
      this.isEditSubjectModal = true
      this.subjectType = 1
      this.handleData(this.research)
    },
    // 研究者click
    subjectResearch () {
      if (this.addResearchVisible) {
        this.addResearcher()
      } else {
        this.browseApprovalPage()
        this.editResearch()
      }
    },
    closeModal () {
      this.subjectModalVisible = false
      if (this.subjectType === 1) {
        this.$emit('update', 1)
      } else {
        this.$emit('update', 2)
      }
    },
    // 关闭受试者弹窗
    closeSubjectModal () {
      this.subjectModalVisible = false
      this.$emit('update', 2)
    },
    // 将获取的数据进行处理
    handleData (obj) {
      this.$nextTick(() => {
        this.$refs.subjectApprovalRef.initData(obj)
      })
    },
    // 审批流程编辑页面浏览
    browseApprovalPage () {}
  })
}
</script>
